<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/main/css/main.css}">
    <title>美食分享平台</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div th:replace="common/m_topbar::m_topbar"></div>
<!-- 主要内容 -->
<div class="container">
    <div class="row clearfix" style="margin-top: 50px">
        <div style="margin: 0 auto;display: block;width: 800px">
            <div class="page-header" id="detail">
                <h2 style="text-align: center" th:text="${food.title}"></h2>
                <div class="ui horizontal link list">
                    <div class="item">
                        <td th:each="ur:${users}" th:if="${ur.userId} eq ${food.userId}">
                            <img th:src="${ur.head}" alt="" class="ui avatar image" style="width: 30px;height: 30px">
                            <div class="content"><a th:href="'/foodshare/main/personal/'+${ur.userId}" class="header"><span style="font-size: 13px" th:text="${ur.username}"></span></a></div>
                        </td>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i><span th:text="${date}"></span>
                    </div>
                </div>
            </div>
            <img style="margin: 0 auto;display: block" width="800" height="520" th:src="${food.image}" />
        </div>
    </div>
    <br/>
    <div class="panel panel-default" style="margin: 0 auto;display: block;width: 800px">
        <div class="panel-body">
            <h4 th:text="${food.detail}"></h4>
        </div>
        <!--赞赏-->
        <div class="ui center aligned basic segment">
            <button id="payButton" class="ui orange basic circular button">赞赏</button>
            <div class="ui payQR flowing popup transition hidden">
            <div class="ui orange basic label">
                <div class="ui images" style="font-size: inherit !important;">
                    <div class="image">
                        <img th:src="@{/main/img/qq.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                        <div>支付宝</div>
                    </div>
                    <div class="image">
                        <img th:src="@{/main/img/weixin.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                        <div>微信</div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <!--留言区域列表-->
    <div style="margin: 0 auto;display: block;width: 800px">
        <div id="comment-container" style="margin-top: 50px" class="ui segment">
            <h3 class="ui dividing header">评论</h3>
            <div class="ui threaded comments" style="max-width: 100%" th:each="comment:${comments}">
                <div class="comment" th:each="ur:${users}" th:if="${comment.userId} eq ${ur.userId}" >
                    <a class="avatar">
                        <img th:src="${ur.head}">
                    </a>
                    <div class="content">
                        <a class="author" th:text="${ur.username}"></a>
                        <div class="metadata">
                            <span class="date" th:text="${#dates.format(food.updateTime,'yyyy-MM-dd HH:mm')}"></span>
                        </div>
                        <div class="text" th:text="${comment.content}">
                        </div>
                        <div class="actions">
                            <a class="reply" data-commentid="1" data-commentusername="Matt" onclick="reply(this)">回复</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form id="comment-form" action="/foodshare/comments/saveComments" method="post" class="ui form">
            <input type="hidden" name="userId" th:value="${user.userId}">
            <input type="hidden" name="foodId" th:value="${food.foodId}">
            <input type="hidden" name="parentCommentId" value="-1">
            <div class="field">
                <textarea name="content" placeholder="请输入评论信息..."></textarea>
            </div>
            <div class="field">
                <button type="submit" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
            </div>
        </form>
    </div>
    <br/>
</div>
<!-- 底部 -->
<div th:replace="common/m_bottom::m_bottom"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    function postData() {
        $("#comment-container").load(/*[[@{/comment}]]*/"",{
            "parentCommentId" : $("[name='parentCommentId]").val(),
            "foodId" : $("[name='foodId]").val(),
            "content" : $("[name='content]").val(),
            "userId" : $("[name='userId]").val(),
        }),function (responseTxt,statusTxt,xhr) {
            $(window).scrollTo($('#comment-container'),500);
            clearContent();
        }
    }
    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentCommentId']").val(-1);
        $("[name='content']").attr("placeholder","请输入评论信息...")
    }
    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentUsername = $(obj).data('commentusername');
        $("[name='content']").attr("placeholder","@"+commentUsername).focus();
        $("[name='parentCommentId]").val(commentId);
        $(window).scrollTo($('#comment-form'),500);
    }
</script>
</body>
</html>